<template>
  <div class="w-full h-full" ref="tableAreaRef">
    <el-table
      :data="tableData"
      :tree-props="treeProps"
      row-key="id"
      default-expand-all
      :row-class-name="tableRowClassName"
      :span-method="arraySpanMethod"
      class="orderTable"
      ref="tableRef"
      style="height: calc(100%)"
    >
      <el-table-column prop="mergeColumn" :label="t('goods_list.序号')" width="80">
        <template #default="{ row }">
          <div v-if="row.saleSkus" class="goodList-item-header flex_aic_jcsb">
            <div class="flex_aic_jcsb" :style="`width: ${tableWidth - 240}px;`">
              <div class="color-999999">
                <span>{{ t('service.订单号') }}：{{ row.sourceSaleNo }}</span>
                <span class="ml20">{{ t('service.退款单号') }}：{{ row.saleNo }}</span>
                <span class="ml20"
                  >{{ t('service.店铺') }}【{{ row["tenantName" + locale] }}】</span
                >
                <span class="ml32">{{ t('service.退款方式') }}：</span>
                <span class="color-primary">{{
                  $t(`service.${refundTypeMap[row.refundAskType]}`) || "--"
                }}</span>
                <span class="ml32">{{ t('service.退款状态') }}：</span>
                <span class="color-primary">{{
                  $t(`service.${refundStatusMap[row.refundStatus]}`) || "--"
                }}</span>
              </div>
              <div class="color-999999">
                <span
                  >{{ t('service.申请时间') }}：{{
                    moment(row.refundAskTime).format("YYYY-MM-DD HH:mm:ss")
                  }}</span
                >
              </div>
            </div>
          </div>
          <span v-else>{{ row.index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="mergeColumn" :label="t('service.用户信息')" width="300">
        <template #default="{ row }">
          <div class="border-left-right">
            <div><span class="color-999999">{{ t('service.用户ID') }}：</span>{{ row.vipId }}</div>
            <div>
              <span class="color-999999">{{ t('service.用户名') }}：</span>{{ row.vipNickName }}
            </div>
            <div>
              <span class="color-999999">{{ t('service.手机号码') }}：</span>{{ row.vipPhone }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="skuId" :label="t('service.商品ID')" width="200" />
      <el-table-column prop="name" :label="t('service.商品信息')" width="400">
        <template #default="{ row }">
          <div class="flex_aic">
            <el-image
              style="width: 82px; height: 82px"
              :src="row.skuSpecDetailImage"
              alt=""
              fit="cover"
              class="flex-shrink-0"
            />
            <div class="ml8">
              <div class="fs-14">{{ row["skuName" + locale] }}</div>
              <span class="color-999999">
                {{ row["skuClassify1Name" + locale] }} >
                {{ row["skuClassify2Name" + locale] }}
              </span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="goodsSpec" :label="t('service.商品规格')" width="200">
        <template #default="{ row }">
          <div class="flex_aic">
            <span class="goods_spec flex_aic gap-4 flex-wrap">
              <span v-for="spec in row.skuSpecDetail" :key="spec.specId"
                >{{ spec["specName" + locale] }}-{{
                  spec["specDetailName" + locale]
                }}</span
              >
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        :label="t('service.商品售价')"
        width="200"
        :formatter="(row) => '￥' + row.skuStockPrice"
      />
      <el-table-column prop="skuCount" :label="t('service.购买数量')" width="200" />
      <el-table-column
        prop="payReal"
        :label="t('service.实付金额')"
        width="200"
        :formatter="(row) => '￥' + row.payReal"
      />
      <!--      <el-table-column prop="mergeColumn" label="申请时间" width="200" :formatter="(row) => moment(row.refundAskTime).format('YYYY-MM-DD HH:mm:ss')"/>-->
      <el-table-column prop="mergeColumn" :label="t('service.收货地址')" width="300">
        <template #default="{ row }">
          <div class="border-left-right">
            <div>
              <span class="color-999999">{{ t('service.收货人') }}：</span>{{ row.vipAddressName }}
            </div>
            <div>
              <span class="color-999999">{{ t('service.手机号码') }}：</span
              >{{ row.vipAddressPhone }}
            </div>
            <div>
              <span class="color-999999">{{ t('service.地址') }}：</span
              >{{ row["vipAddressProvince" + locale] }}
              {{ row["vipAddressCity" + locale] }}
              {{ row["vipAddressArea" + locale] }}
              {{ row.vipAddressAddress }}
              {{ row.vipAddressDetail }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="mergeColumn"
        :label="t('service.退款金额')"
        width="300"
        :formatter="(row) => ('￥' + row.refundReal ? row.refundReal : '')"
      />
      <el-table-column
        prop="mergeColumn"
        :label="t('service.操作')"
        fixed="right"
        width="200"
      >
        <template #default="{ row }">
          <div class="operate_btn" @click="handleReceive(row)">{{ t('service.查看详情') }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, watch } from "vue";
import moment from "moment";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { orderStatusMap, refundStatusMap, refundTypeMap } from "./data";
import { getLangs } from "@/i18n/tools";
const { locale, t } = useI18n();
const router = useRouter();

const tableRef = ref();
const tableAreaRef = ref();
const tableWidth = ref(0);
const props = defineProps({
  goodList: {
    type: Array,
    default: () => [],
  },
  type: {
    type: String,
    default: "",
  },
});
const tableData = ref([]);
const treeProps = reactive({
  checkStrictly: false,
  children: "saleSkus",
});

const tableRowClassName = ({ row, rowIndex }) => {
  if (row.saleSkus) {
    return "warning-row";
  }
  return "";
};
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // console.log("column===", column);

  if (row.saleSkus && columnIndex === 0) {
    return [1, 100];
  }
  if (row.saleSkus && columnIndex !== 0) {
    return [1, 0];
  }
  if (!row.saleSkus) {
    if (column.property === "mergeColumn") {
      console.log("row===");

      if (row.saleSkusIndex === 0) {
        return [row.saleSkusLength, 1];
      } else {
        return [0, 1];
      }
    }
  }
};

const handleReceive = (row) => {
  Storage.set("orderDetail", row, true);
  router.push({
    path: "/order/service/detail",
    query: {
      id: row.saleId,
    },
  });
};

onMounted(() => {
  tableWidth.value = tableAreaRef.value.clientWidth;
  window.addEventListener("resize", function () {
    nextTick(() => {
      tableWidth.value = tableAreaRef.value.clientWidth;
    });
  });
});

watch(
  () => props.goodList,
  () => {
    const mergeKey = [
      "vipNickName",
      "vipPhone",
      "vipAddressName",
      "vipAddressPhone",
      "vipAddressAddress",
      "vipAddressDetail",
      "payDiscountCoupon",
      "payDiscountPoint",
      "sendNo",
      "sendCode",
      "sendName",
      "refundReal",
      "refundAskTime",
      "index"
    ];
    getLangs().forEach((el3) => {
      mergeKey.push(`vipAddressProvince${el3}`);
      mergeKey.push(`vipAddressCity${el3}`);
      mergeKey.push(`vipAddressArea${el3}`);
    });

    tableData.value = props.goodList?.map((el, index) => {
      el.index = index
      el.saleSkus?.forEach((el2, i) => {
        mergeKey.forEach((key) => {
          el2[key] = el[key];
        });

        el2.saleSkusIndex = i;
        el2.saleSkusLength = el.saleSkus.length;
      });
      return el;
    });
  }
);
</script>
<style lang="scss" scoped>
.goodList {
  .table-header {
    height: 40px;
    margin-bottom: 10px;
    border-radius: 3px;
    background: #f5f5f5;
    .table-header-item {
      flex-shrink: 0;
      height: 40px;
      background: #f5f5f5;
      color: #333;
      font-size: 14px;
      line-height: 30px;
      padding: 0 13px;
    }
  }

  .goodList-item {
    .goodList-item-header {
      width: 100%;
      height: 35px;
      padding: 0 13px;
      background: #fff1e8;
      > div {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
      }
    }
    .goodList-item-content {
      .sku {
        padding: 6px 0;
        border-bottom: 1px solid #f5f5f5;
        > div {
          padding: 0 13px;
        }
      }
    }
  }
}

.orderTable {
  :deep(.el-table__expand-icon) {
    display: none !important;
  }

  :deep(.warning-row) {
    background-color: #fff1e8;
    height: 20px;
    .el-table__cell {
      padding: 4px 0;
    }
  }
  :deep(.el-table__placeholder) {
    display: none;
  }
  :deep(.el-table__indent) {
    display: none;
  }
  .goods_spec {
    margin-top: 12px;
    font-size: 12px;
    flex-wrap: wrap;
    span {
      white-space: nowrap;
      padding: 2px 5px;
      background: #f5f5f5;
      border-radius: 3px;
    }
  }
  .operate_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 26px;
    margin-top: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    &:first-child {
      margin-top: 0;
    }
  }

  .border-left-right {
    // border-left: 1px solid #ebeef5;
  }
}
</style>
